<div class="panel panel-default row" ng-controller="productListCtrl" ng-hide="data.err">
    <div class="col-xs-3">
        <a ng-click="selectCategory()" class="btn btn-default btn-lg btn-block">Home</a>
        <a ng-repeat="product in data.products|orderBy:'category'|unique:'category'" ng-click="selectCategory(product)"
           class="btn  btn-block btn-default btn-lg" ng-class="getCategoryClass(product)">{{product}}</a>
    </div>
    <div class="col-xs-9">
        <div class="well" ng-repeat="product in data.products|filter:categoryFilterFn|range:selectedPage:pageSize">
            <h3><strong>{{product.name}}</strong>
            <span class="pull-right label label-primary">
                {{product.price|currency}}
            </span>
            </h3>
            <button class="btn btn-success pull-right" ng-click="addProductToCart(product)">Add to cart</button>
            <span class="lead">{{product.description}}</span>
        </div>
        <div class="pull-right btn-group">
            <a ng-repeat=" page in data.products|filter:categoryFilterFn|pageCount:pageSize"
               ng-click="selectPage($index+1)" class="btn btn-default" ng-class="getPageClass($index+1)">{{$index+1}}</a>
        </div>
    </div>
</div>